<template>
  <div class="home-web-container">
    <div class="left-panel">
      <frame-block title="客户数量">
        <div class="kehu-shu-top">
          <div class="kehushu-content">
            <div class="content-left">
              <div class="tongbi-num">
                <span class="per-text">同比</span
                ><span class="per-num"><round :value="32" />%</span>
              </div>
              <div class="tongbi-progress">
                <el-progress :show-text="false" :percentage="32" />
              </div>
              <div class="huanbi-num">
                <span class="per-text">环比</span
                ><span class="per-num"><round :value="76" />%</span>
              </div>
              <div class="huanbi-progress">
                <el-progress :show-text="false" :percentage="76" />
              </div>
            </div>
            <div class="content-right">
              <div class="peo-num"><round :value="132" /></div>
              <div class="peo-bg">
                <span class="peo-title">人员</span>
              </div>
            </div>
          </div>
        </div>
      </frame-block>
      <frame-block title="碳排放排名">
        <div class="tanpaifang-bottom">
          <EmissionCard
            v-for="(item, index) in emissionList"
            :key="index"
            :emissionItem="item"
          ></EmissionCard>
        </div>
      </frame-block>
    </div>
    <div class="center-content">
      <echartdot></echartdot>
    </div>
    <div class="right-panel">
      <frame-block title="设备数量">
        <div class="kehu-shu-top">
          <div class="kehushu-content">
            <div class="content-left">
              <div class="tongbi-num">
                <span class="per-text">同比</span
                ><span class="per-num"><round :value="12" />%</span>
              </div>
              <div class="tongbi-progress">
                <el-progress :show-text="false" :percentage="12" />
              </div>
              <div class="huanbi-num">
                <span class="per-text">环比</span
                ><span class="per-num"><round :value="58" />%</span>
              </div>
              <div class="huanbi-progress">
                <el-progress :show-text="false" :percentage="58" />
              </div>
            </div>
            <div class="content-right">
              <div class="peo-num sb-num"><round :value="221" /></div>
              <div class="peo-bg sb-bg">
                <span class="peo-title">设备</span>
              </div>
            </div>
          </div>
        </div>
      </frame-block>
      <frame-block title="设备状态">
        <industry id="sbzt" />
      </frame-block>
      <frame-block title="行业情况">
        <industry id="hyqk" type="line" />
      </frame-block>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import axios from '@/utils/axios'
import EmissionCard from '../components/HomeView/EmissionCard.vue'
import industry from '../components/HomeView/industry.vue'
const store = useStore()
store.state.pageName = "home"

const emissionList = reactive([
  {
    companyNum: 66226063.2,
    companyName: '宁夏吉元冶金集团有限公司',
    organiseUnitId: 'f35a6d74-e214-11ec-beac-fa2020093407',
    index: 1
  },
  {
    companyNum: 47333982.1,
    companyName: '宁夏中卫市银河冶炼有限公司',
    organiseUnitId: '7051448092415234048',
    index: 2
  },
  {
    companyNum: 45897428.8,
    companyName: '宁夏胜金硅业有限公司',
    organiseUnitId: 'ef81b42e-fcf6-11ec-beac-fa2020093407',
    index: 3
  },
  {
    companyNum: 41047550.8,
    companyName: '平罗县万顺冶金化工有限公司',
    organiseUnitId: '7108269863592005632',
    index: 4
  },
  {
    companyNum: 31325733.1,
    companyName: '西宁特殊钢股份有限公司',
    organiseUnitId: '5ece8f9e-1a25-11ed-beac-fa2020093407',
    index: 5
  },
  {
    companyNum: 30692205,
    companyName: '宁夏参进宁宇达冶金有限公司',
    organiseUnitId: '7100688627830886400',
    index: 6
  },
  {
    companyNum: 30472953.9,
    companyName: '宁夏中迈新能源有限公司',
    organiseUnitId: '7100295194976980992',
    index: 7
  },
])

onMounted(() => {})
</script>

<style lang="scss" scoped>
.kehu-shu-top {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .kehushu-content {
    display: flex;
    .content-left {
      width: 202px;
      .tongbi-num {
        width: 162px;
        height: 45px;
        background-image: url('@/assets/images/tongbi-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-left: 24px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .per-text {
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #fcf8f8;
        }
        .per-num {
          font-size: 18px;
          font-family: YouSheBiaoTiHei;
          color: #3dfefc;
          margin-right: -4px;
        }
      }
      .tongbi-progress {
        width: 100%;
        height: 7px;
        margin-top: 9px;
        :deep(.el-progress) {
          height: 100%;
          .el-progress-bar {
            height: 100%;
            .el-progress-bar__outer {
              height: 100% !important;
              background-color: rgba(252, 248, 248, 0.07) !important;
              .el-progress-bar__inner {
                width: 105px;
                background-color: #3dfefc;
              }
            }
          }
        }
      }
      .huanbi-num {
        margin-top: 37px;
        width: 162px;
        height: 45px;
        background-image: url('@/assets/images/tongbi-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-left: 24px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .per-text {
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #fcf8f8;
        }
        .per-num {
          font-size: 18px;
          font-family: YouSheBiaoTiHei;
          color: #3dfefc;
          margin-right: -4px;
        }
      }
      .huanbi-progress {
        width: 100%;
        height: 7px;
        margin-top: 9px;
        :deep(.el-progress) {
          height: 100%;
          .el-progress-bar {
            height: 100%;
            .el-progress-bar__outer {
              height: 100% !important;
              background-color: rgba(252, 248, 248, 0.07) !important;
              .el-progress-bar__inner {
                width: 105px;
                background-color: #ffd800;
              }
            }
          }
        }
      }
    }
    .content-right {
      width: 158px;
      margin-left: 26px;
      .peo-num {
        width: 44px;
        height: 26px;
        font-size: 20px;
        font-family: YouSheBiaoTiHei;
        color: #3dfefc;
        margin-left: 23px;
      }
      .peo-bg {
        width: 150px;
        height: 148px;
        background-image: url('@/assets/images/HomeView/peo-bg.png');
        background-size: 100% 100%;
        position: relative;
        .peo-title {
          position: absolute;
          left: 4px;
          top: 8px;
          font-size: 12px;
          font-family: YouSheBiaoTiHei;
          color: #3dfefc;
          margin-left: 23px;
        }
      }
      .sb-num {
        margin-left: 60px;
      }
      .sb-bg {
        background-image: url('@/assets/images/HomeView/sb-bg.png');
        .peo-title {
          left: 42px;
        }
      }
    }
  }
}
.home-web-container {
  width: 100%;
  height: 100%;
  padding: 5px 15px 10px 15px;
  display: flex;
  .left-panel {
    width: 450px;

    & > div:nth-child(1) {
      height: calc(100% / 3);
    }
    & > div:nth-child(2) {
      height: calc(100% / 3 * 2);
      // overflow: auto;
    }
    .tanpaifang-bottom {
      padding: 8px 10px 0px 10px;
    }
  }
  .center-content {
    flex: 1;
  }
  .right-panel {
    width: 450px;

    & > div {
      height: calc(100% / 3);
    }
    .device-num-top {
    }
    .device-status-center {
    }
    .industry-bottom {
    }
  }

  .left-panel,
  .center-content,
  .right-panel {
    height: 100%;
  }
}
</style>